﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>加载预览数据</title>
<script src="/JS/jquery.min.js"></script>
<style type="text/css">
    /*加载等待样式*/
    .loading {
        width: 100%;
        height: 100%;
        margin-top:10%;
        vertical-align: middle;
    }

        .loading td {
            text-align: center;
        }

        .loading .circle {
            background-color: rgba(0,0,0,0);
            border: 5px solid rgba(0,183,229,0.9);
            opacity: .9;
            border-right: 5px solid rgba(0,0,0,0);
            border-left: 5px solid rgba(0,0,0,0);
            border-radius: 50px;
            box-shadow: 0 0 35px #2187e7;
            width: 50px;
            height: 50px;
            margin: 0 auto;
            -webkit-animation: spinPulse 1s infinite linear;
        }

        .loading .circle1 {
            background-color: rgba(0,0,0,0);
            border: 5px solid rgba(0,183,229,0.9);
            opacity: .9;
            border-left: 5px solid rgba(0,0,0,0);
            border-right: 5px solid rgba(0,0,0,0);
            border-radius: 50px;
            box-shadow: 0 0 15px #2187e7;
            width: 30px;
            height: 30px;
            margin: 0 auto;
            position: relative;
            top: -50px;
            -webkit-animation: spinoffPulse 1s infinite linear;
        }

    @-webkit-keyframes spinPulse {
        0% {
            -webkit-transform: rotate(160deg);
            opacity: 0;
            box-shadow: 0 0 1px #2187e7;
        }

        50% {
            -webkit-transform: rotate(145deg);
            opacity: 1;
        }

        100% {
            -webkit-transform: rotate(-320deg);
            opacity: 0;
        }
    }

    @-webkit-keyframes spinoffPulse {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .loading .stop {
        -webkit-animation-play-state: paused;
    }

    .loading .msg {
        display: inline-block;
        font-size: 12px;
        position: relative;
        top: -30px;
        color: #ccc;
        display: inline-block;
    }

    @-webkit-keyframes shine {
        0% {
            background-position: top left;
        }

        100% {
            background-position: top right;
        }
    }

    .shine {
        background: #222 -webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat;
        -webkit-background-size: 30% 100%;
        color: rgba(48,196,233, 0.3);
        -webkit-background-clip: text;
        -webkit-animation-name: shine;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
    }
    /*加载等待样式end*/  
</style>
</head>
<body>
    <table id="loading" class="loading"><tbody><tr><td><div class="circle"></div><div class="circle1"></div><div class="msg"><p class="shine">正在加载数据,请稍等...</p></div></td></tr></tbody></table>
</body>
</html>
